<template>
    <div class="error">
        <div class="center">
            <img class="err_img" src="../assets/img/404.png" draggable="false" />
            <div class="tips">您访问的页面消失了...</div>
            <el-button plain @click="backHome">返回首页</el-button>
        </div>
    </div>
</template>

<script>
import { useRouter } from "vue-router";

export default {
    setup() {
        const router = useRouter();

        const backHome = () => {
            router.replace("/");
        };

        return { backHome };
    }
};
</script>

<style lang="scss" scoped>
.error {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background-color: #fff;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;

    .center {
        position: absolute;
        top: 32%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;

        .err_img {
            display: block;
            width: 564px;
            height: 360px;
        }

        .tips {
            padding-bottom: 30px;
            font-size: 20px;
            color: #666;
        }
    }
}
</style>
